<!DOCTYPE html>
<html lang="<%=language%>" dir="<%=t('direction')%>" >
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="ie=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title><%=t('login.title')%></title>
        <link rel='stylesheet' href='/css/header.css'>
        <link rel='stylesheet' href='/css/login.css'>
        <link rel='stylesheet' href='/css/footer.css'>
        <link rel="icon" href="/img/favicon-light.png" media="(prefers-color-scheme: light)" />
        <link rel="icon" href="/img/favicon-dark.png" media="(prefers-color-scheme: dark)" id="favicon" />
        <script defer src="/scripts/cjs/views/login.js"></script>
    </head>
    <body>
        <%- include(`${viewsfolder}/components/header`, {t:t, languages:languages, language:language}) %>
        <main>
            <div id="content">                  
                <h1 class="center"><%=t('login.title')%></h1>
                <form action="./login" method="POST" class="center" id="form">
                    <div class="formfield">
                        <div id="usernameinputline">
                            <label for="username"><%=t('login.username')%></label>
                            <input id="username" type="text" name="username" required maxLength="40" autocomplete="off" autofocus>
                        </div>
                        <div id="passwordinputline">
                            <label for="password"><%=t('login.password')%></label>
                            <input id="password" type="password" name="password" required>
                        </div>
                        <!-- This is where our script inserts an error division! -->
                    </div>
                    <p id="forgot" class="forgothidden"><%=t('login.forgot_password.0')%><a href='mailto:infinitechess.org@gmail.com'><%=t('login.forgot_password.1')%></a></p>
                    <input type="submit" value="<%=t('login.login_button')%>" class="unavailable" id="submit">
                </form>
            </div>
        </main>
        <%- include(`${viewsfolder}/components/footer`, {t:t, languages:languages, language:language}) %>
    </body>
</html>